<!-- 申请售后页 -->
<template>
  <view class="my-content box">
    <view class="afterSale">
      <view class="title">
        <view class="_title"></view>
        <text>{{$t("申请售后订单")}}</text>
      </view>
      <view class="ordernumber">
        <view class="top">
          <p>{{$t("订单编号")}}:
            <text>{{ order_info.order_no }}</text>
          </p>
          <p>{{$t("类型")}}:
            <text>{{ order_type[order_info.type] }}</text>
          </p>
          <p>{{$t("内容")}}:
            <text>{{ order_info.show_text }}</text>
          </p>
        </view>
        <view class="bottom">
          <text>{{$t("保证金补偿说明")}}:</text>
          <text v-if="bail == null" @click="show = true">{{$t('请选择补偿百分比')}}></text>
          <text v-else  @click="show = true">{{$t('补偿百分比')}} - {{ bail }}</text>
        </view>
      </view>
      <u-picker v-model="show" :range="selector" mode="selector" range-key="cateName" title="选择补偿百分比"
                @confirm="confirm"></u-picker>
      <view class="explain">
        <view>
          <p style="margin-bottom: 8rpx;">
            <text>{{$t('申请说明')}}:</text>
          </p>
          <textarea :placeholder="$t('请输入售后原因')" placeholder-style="font-size:25rpx;"
                    style="font-size:25rpx;height: 162rpx;"
                    @blur="bindTextAreaBlur"></textarea>
        </view>
        <view>
          <p class="tp">
            <text>{{$t("请上传图片")}}：</text>
          </p>
          <u-upload :action="action" :limitType="limitType" :max-count="imageMaxCount"
                    :max-size="imageMaxSize" @on-success="success"></u-upload>
        </view>
      </view>
    </view>
    <view class="foot">
      <u-button :custom-style="customStyle" hover-class="none" type="primary" @click="submit">{{$t('提交申请')}}</u-button>
    </view>

  </view>
</template>

<script>
import {
  HTTP_REQUEST_URL,
  IMAGE_MAX_SIZE,
  IMAGE_MAX_COUNT
} from 'config/app.js'

export default {
  data() {
    return {
      bail: null,
      show: false,
      order_type: {
        goods: this.$t("货物"),
        transport: this.$t("运输"),
        crossborder: this.$t("跨境货代"),
        professional: this.$t("专业代办"),
      },
      selector: [{
        cateName: '10%',
        refund: '0.1'
      },
        {
          cateName: '20%',
          refund: '0.2'
        },
        {
          cateName: '30%',
          refund: '0.3'
        },
        {
          cateName: '40%',
          refund: '0.4'
        },
        {
          cateName: '50%',
          refund: '0.5'
        },
        {
          cateName: '60%',
          refund: '0.6'
        },
        {
          cateName: '70%',
          refund: '0.7'
        },
        {
          cateName: '80%',
          refund: '0.8'
        },
        {
          cateName: '90%',
          refund: '0.9'
        },
        {
          cateName: '100%',
          refund: '1'
        }
      ],
      // 按钮样式
      customStyle: {
        width: '656rpx',
        height: '63rpx',
        background: 'linear-gradient(110deg, #DD2910 0%, #F79B29 100%)',
        'border-radius': '26rpx',
      },
      order_id: 0,
      content: '',
      images: [],
      refund: '',
      action: HTTP_REQUEST_URL + '/common/upload',
      imageMaxSize: IMAGE_MAX_SIZE,
      imageMaxCount: IMAGE_MAX_COUNT,
      limitType: ['png', 'jpg', 'jpeg', 'webp', 'gif', 'image'],
      order_info: {}, //订单信息
    }
  },
  onLoad(options) {
    this.order_id = options.order_id
    this.$u.api.order.getOrderDetail({
      id: this.order_id
    }).then(res => {
      this.order_info = {
        order_no: res.orderInfo.order_no,
        type: res.orderInfo.type,
        name: res.orderInfo.release_info.name

      }
    })
  },
  onReady() {
        uni.setNavigationBarTitle({
            title: this.$t("申请售后")
        })
    },
  methods: {
    // 上传图片成功的回调
    success(data) {
      this.images.push({
        url: data.data.fullurl
      })
      // console.log(this.images)
    },
    // 拿到申请说明
    bindTextAreaBlur(e) {
      // console.log(e.detail.value)
      this.content = e.detail.value
    },
    // 拿到保证金
    confirm(val) {
      // console.log(val);
      this.bail = this.selector[val].cateName
      this.refund = this.selector[val].refund
    },
    // 提交售后
    submit() {
      this.$u.api.order.saveRefund({
        order_id: this.order_id,
        content: this.content,
        images: this.images,
        refund: this.refund
      }).then(res => {
		this.$u.toast(this.$t('提交成功，请等待后台审核'))
        setTimeout(() => {
          this.$u.route({
            url: '/pages/tabbar/order/index',
            type: 'switchTab'
          })
        }, 1000)
      }).catch(err => {
        this.$u.toast(msg)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.box {
  display: flex;
  flex-direction: column;
}

.afterSale {
  height: calc(100% - 178rpx);
  background: #f9f9f9;
  padding: 19rpx 20rpx 0 17rpx;

}

.title {
  ._title {
    width: 2rpx;
    height: 37rpx;
    border: 5rpx solid;
    border-image: linear-gradient(180deg, rgba(221, 42, 16, 1), rgba(247, 152, 41, 1)) 5 5;
    float: left;
    margin-left: 15.7rpx;
  }

  text {
    font-weight: 500;
    color: #0B0B0B;
    line-height: 35rpx;
    margin-left: 5.23rpx;
  }
}

.ordernumber {
  width: 100%;
  height: 248rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(232, 232, 232, 0.5);
  border-radius: 19rpx;
  margin-top: 17rpx;
  padding: 0  24rpx 0 24rpx;
  display: flex;
  flex-direction: column;

  .top {
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    width: 100%;
    height: 162rpx;
    border-bottom: 2rpx solid #DCDCDC;
    box-sizing: border-box;

    p {
      font-weight: 400;
      color: #000000;
      line-height: 30rpx;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;

      text {
        margin-left: 20rpx;
      }
    }
  }

  .bottom {
    flex: 1;
    font-weight: 400;
    color: #787878;
    line-height: 30rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}

.explain {
  width: 100%;
  height: 546rpx;
  background: #FFFFFF;
  box-shadow: 0rpx 3rpx 7rpx 0rpx rgba(232, 232, 232, 0.5);
  border-radius: 19rpx;
  margin-top: 17rpx;
  padding: 20rpx 0 0 26rpx;

  .tp {
    margin: 10rpx;
  }
}

.foot {
  flex: 1;
  display: flex;
  justify-content: center;
  padding-top: 26rpx;

  font-weight: 600;
  color: #FFFFFF;
  line-height: 35rpx;
}
</style>
